/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-11-04 15:20:55
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2022-11-09 10:47:40
 * @FilePath: \adminstration\src\Common\Scenes\Mars3d\Modular.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Select, Switch, Slider, Button, InputNumber } from 'antd'
import { useBoolean, useRequest } from 'ahooks'
import { SketchPicker } from 'react-color'
import { useState } from 'react'

// 弹窗通用头
export const CommonTopTitle = ({ title }) => <div className="CommonTopTitle">{title}</div>

// select下拉选择
export const Mars3DSelect = ({ OptionsEvent, options, label, value, mode }) => (
    <Select
        {...(mode === 'multiple' ? { mode: 'multiple' } : '')}
        style={{ width: '100%' }}
        value={value}
        options={options}
        onChange={e => OptionsEvent.emit({ [label]: e })}
    />
)

// switch开关
export const Mars3DSwitch = ({ OptionsEvent, label, value }) => (
    <Switch checked={value} onChange={e => OptionsEvent.emit({ [label]: e })} />
)

// color颜色选择
export const Mars3DColor = ({ OptionsEvent, label, value }) => {
    const [colorData, setColorData] = useState(value)
    const [colorState, { setTrue, setFalse }] = useBoolean(false)
    return (
        <>
            <div style={{ width: '70%', height: '70%', background: value, cursor: 'pointer' }} onClick={setTrue} />
            {colorState && (
                <div className="colorSelect">
                    <SketchPicker
                        color={colorData}
                        onChange={({ rgb }) => setColorData(`rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`)}
                    />
                    <div>
                        <Button size="small" onClick={() => OptionsEvent.emit({ [label]: colorData })}>
                            确定
                        </Button>
                        <Button size="small" onClick={setFalse}>
                            取消
                        </Button>
                    </div>
                </div>
            )}
        </>
    )
}

// slider滑动输入
export const Mars3DSlider = ({ OptionsEvent, label, value, range, step }) => {
    const [number, setNumber] = useState(value)
    const [State, { setTrue, setFalse }] = useBoolean(false)

    return (
        <>
            <div style={{ color: 'white', fontSize: 20, cursor: 'pointer' }} onClick={setTrue}>
                {value ?? 0}
            </div>
            {State && (
                <div className="sliderBox">
                    <Slider
                        defaultValue={value}
                        style={{ width: '90%' }}
                        min={range[0]}
                        max={range[1]}
                        step={step}
                        onChange={e => setNumber(e)}
                    />
                    <div>
                        <Button size="small" onClick={() => OptionsEvent.emit({ [label]: number })}>
                            确定
                        </Button>
                        <Button size="small" onClick={setFalse}>
                            取消
                        </Button>
                    </div>
                </div>
            )}
        </>
    )
}

// 通用模块导出
export const Mars3DOptionsModular = {
    select: Mars3DSelect,
    boolean: Mars3DSwitch,
    color: Mars3DColor,
    slider: Mars3DSlider,
}
